<template>
    <div class="template-layout">

        <UserFixedHead>
            <button @click="goBack(-1)"><i class="iconfont icon-zuo"></i></button>
            <span>Detail</span>
        </UserFixedHead>

        <!-- 初始化 -->
        <UxIniting v-if="!inited" />

        <template v-else>

            <h2>
                <a @click="goBack(-1)">Product templates</a>
                <i class="iconfont icon-you"></i>
                <a>Detail</a>
            </h2>

            <h3>Template info</h3>

            <div class="detail-row">

                <div class="detail-mockup">
                    <CommonTemplatePreview :pieces="detail.design_list" :baseModel="mockupList[mockupIndex]"
                        :baseColor="getColorPreview(mockupList[mockupIndex])" size="large" />
                    <ul class="detail-mockup-slider">
                        <li v-for="(model, index) in mockupList" :key="model.id"
                            :class="{ active: mockupIndex == index }" @click="mockupIndex = index">
                            <CommonTemplatePreview :baseModel="model" :baseColor="getColorPreview(model)"
                                size="large" />
                        </li>
                    </ul>
                </div>

                <div class="detail-info">
                    <UxTemplateInputInline v-model="rename" @change="updateName($event)" @blur="updateName($event)" />

                    <div class="detail-info-name">
                        <nuxt-link :to="'/product/detail?id=' + detail.spu">{{ detail.title }}</nuxt-link>
                    </div>

                    <div class="detail-info-colors">
                        <ul>
                            <li v-for="(color, index) in detail.color_list" :key="color.color_id"
                                @click="colorIndex = index">
                                <CommonColorBlock :color="color" :active="colorIndex == index"></CommonColorBlock>
                            </li>
                        </ul>
                    </div>
                    <div class="detail-info-print" v-if="printDisable">
                        <CommonSurfacePreview placement="top" :design="detail.design_list" />
                    </div>

                    <div class="detail-info-async" v-if="detail.shop_list && detail.shop_list.length > 0">
                        <div class="detail-info-async-list">
                            <StoreIconSelect v-for="shop in (detail.shop_list || [])" :key="shop.id" :item="shop" />
                        </div>
                    </div>

                    <div class="detail-info-sizes" v-if="detail.size_price && detail.size_price.length > 0"
                        :level="detail.user_level">
                        <table>
                            <thead>
                                <tr>
                                    <th>Size</th>
                                    <th v-for="size in detail.size_price" :key="size.id" v-text="size.size_name"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>Cost</th>
                                    <td v-for="size in detail.size_price" :key="size.id">
                                        <CommonLevelDiscount :price="size.price + detail.extra_price" :level="detail"
                                            type="original" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <CommonLevelDiscount :level="detail" type="icon|label" />
                                    </td>
                                    <td v-for="size in detail.size_price" :key="size.id">
                                        <CommonLevelDiscount :level="detail" :price="size.price + detail.extra_price"
                                            :blank="detail.is_blank" type="discount" />
                                    </td>
                                </tr>

                            </tbody>
                        </table>

                    </div>

                    <div class="detail-info-branding" v-if="detail.tag_design_info || detail.pack_design_info"
                        :class="{ pre: userInfo.level > 1 }">
                        <CommonBrandPreview :tag="detail.tag_design_info" :pack="detail.pack_design_info"
                            discount="pre|unit|original|discount|icon" />
                    </div>

                    <div class="detail-info-action">
                        <button @click="asyncStore()">Add to store</button>
                        <button @click="makeOrder()">Order</button>

                        <TemplateMockupsDownload :detail="detail" />

                        <UxPopper placement="top" :offset="[6, 6]" :close-on-click="true">
                            <button><i class="iconfont icon-gengduodingdanguanli"></i></button>
                            <div class="table-more" slot="pop">
                                <button @click="branding = detail">Branding</button>
                                <TemplateActionEdit v-if="!detail.is_blank" :item="detail" @reload="goBack(-1)" />
                                <TemplateActionRemove :item="detail" @reload="goBack(-1)" />
                            </div>
                        </UxPopper>

                    </div>

                </div>
            </div>

            <h3>Model images</h3>
            <TemplateModelImages :detail="detail" />

            <!-- 加载中 -->
            <UxLoading2 :loading="loading" />

        </template>

        <!-- 同步到店铺 -->
        <UserSyncStore v-model="store" />

        <!-- 下单选择订单类型 -->
        <UserMakeOrder v-model="order" />

        <!-- 增值服务弹窗 -->
        <BrandingBindProduct v-model="branding" v-if="branding" source="template" @update="brandingUpdate()" />

    </div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
export default {
    name: "UserTemplateDetail",
    layout: "layout-user",
    data () {
        return {
            inited: false,
            loading: true,
            tid: 0,
            detail: null,

            mockupIndex: 0,
            colorIndex: 0,


            downloading: 0,
            rename: '',
            store: null, // 同步到店对话框
            order: null, // 下单对话框
            remove: null, // 删除对话框
            duplicate: null, // 编辑更新对话框
            branding: null,// 增值服务弹窗数据
        };
    },
    computed: {
        ...mapGetters("user", {
            userInfo: "getUserInfo",
        }),
        mockupList () {
            const models = this.detail ? this.detail.model_img : []
            const tag_name = 'flat lay';
            const tag_able = ['hanging', 'flat lay', 'model'].filter(i => models.find(m => (m.model_tag || 'hanging') == i))
            const tag_active = tag_able.indexOf(tag_name) >= 0 ? tag_name : tag_able[0];

            return models.filter(m => (m.model_tag || 'hanging') == tag_active)
        },
        sizePrice () {
            const sizes = this.detail ? this.detail.size_price : []
            sizes.sort((a, b) => a.sort - b.sort)
            return sizes;
        },
        printDisable () {
            const list = this.detail ? this.detail.design_list : []
            const result = list.filter(i => i.output_img);
            return result.length > 0;
        }
    },
    methods: {


        // 编辑名字
        async updateName (event) {
            let value = this.rename.trim()

            if (this.loading == true) {
                // 正在加载中的不管
                // this.input = false;
            } else if (this.detail.template_name == value) {
                // 值相同的不管
            } else if (!/[\w\W]+/.test(value)) {
                this.rename = this.detail.template_name;
                this.$uxMessage.error("At least one character");
            } else {
                this.loading = true;
                let response = await this.$http(
                    "storeTemplate.putName/" + this.tid,
                    {
                        name: value,
                    }
                );
                if (response.code === 0) {
                    this.loading = false;
                    this.detail.template_name = value;
                    this.$uxMessage.success("Template renamed successfully");
                    sessionStorage.removeItem('/user/template');
                } else {
                    this.loading = false;
                    this.$uxMessage.error("Failed to rename template");
                }
            }
        },

        // 检查
        async checkItem (type) {
            let name = /update|remove|branding/.test(type) ? type : "update";
            let editable = null;
            this.loading = true;

            if (name == 'branding') {
                editable = { code: 0 }
            } else {
                editable = await this.$http(
                    "storeTemplate.getEditable/" + this.tid
                );
            }


            if (editable.code !== 0) {

                // 请求失败
                this.loading = false;
                this.$uxMessage.error(editable.msg || "Failed to duplicate template");

            } else if (name == "update") {
                // 编辑
                if (editable.data) {
                    // 可编辑，跳转过去
                    this.$router.push({
                        path: "/designer",
                        query: { tid: this.tid },
                    });
                } else {
                    // 不可编辑，则复制
                    this.loading = false;
                    this.duplicate = () => {
                        this.duplicate = null;
                        this.loading = true;
                        this.$http("storeTemplate.postCopy", this.tid).then(response => {
                            if (response.code === 0) {
                                // TODO 不可编辑这里的交互要确定
                                sessionStorage.removeItem('/user/template');
                                this.goBack(-1);
                                this.$uxMessage.success("Template duplicated successfully");
                            } else {
                                this.loading = false;
                                this.$uxMessage.error("Failed to duplicate template");
                            }
                        })

                    }
                }
            } else if (name == "remove") {
                // 删除
                if (editable.data) {
                    this.loading = false;
                    this.remove = () => {
                        this.remove = null;
                        this.loading = true;
                        this.$http("storeTemplate.remove/" + this.tid).then(response => {
                            if (response.code === 0) {
                                sessionStorage.removeItem('/user/template');
                                this.goBack(-1);
                                this.$uxMessage.success("Remove template successfully");
                            } else {
                                this.$uxMessage.error("Failed to remove template");
                                this.loading = false;
                            }
                        })
                    }
                } else {
                    // 不可删除
                    this.loading = false;
                    this.remove = "forbid";
                }
            } else if (name == "branding") {
                this.branding = this.detail;
                this.loading = false;


            }

        },



        // 获取数据
        async getDetail () {
            this.loading = true;
            const response = await this.$http("storeTemplate.getTemplate", this.tid);

            this.loading = false;
            if (response.code === 0) {

                const detail = response.data || {}
                const price_all = detail.size_price.map(i => i.price);
                const price_max = Math.max(...price_all);
                const price_min = Math.min(...price_all);

                detail.size_price = [...detail.size_price].sort((a, b) => a.sort - b.sort)
                detail.color_list = [...detail.color_list].sort((a, b) => a.sort - b.sort)
                detail.high_price = parseFloat(price_max);
                detail.low_price = parseFloat(price_min);
                detail.design_list = detail.design_list || []


                this.rename = detail.template_name || '';
                this.detail = detail;

            } else {
                this.goBack(-1);
            }

        },

        // 筛选标签
        getModesByTag (models, tag) {
            const tag_name = tag || 'hanging';
            const tag_able = ['hanging', 'flat lay', 'model'].filter(i => models.find(m => (m.model_tag || 'hanging') == i))
            const tag_active = tag_able.indexOf(tag_name) >= 0 ? tag_name : tag_able[0];
            return models.filter(m => (m.model_tag || 'hanging') == tag_active)
        },




        // 颜色预览
        getColorPreview (item) {
            const color = this.detail.color_list[this.colorIndex] || {};
            return color || {
                color_num: '',
                bg_back: "",
                bg_front: "",
                color_id: '',
            }
        },

        // 同步到商店
        asyncStore () {
            this.store = { id: this.tid }
        },

        // 生成订单
        makeOrder () {
            const detail = this.detail;
            this.order = {
                spu: detail.spu, //商品的SPU用于确认SKU
                title: detail.title, //标题
                model_img: detail.model_img, // 模特列表
                design_list: detail.design_list, //设计信息
                source: "template", //商品来源
                design_id: detail.id, //商品来源
                extra_price: detail.extra_price, // 设计面价格
                is_blank: detail.is_blank, // 是否空白模板
                color_base: detail.show_color_num, // 选中的颜色
                tag: detail.tag_design_info, // 吊牌
                pack: detail.pack_design_info // 包装
            };

        },

        //关闭弹窗时触发，判断是否改动
        brandingUpdate (change) {
            sessionStorage.removeItem('/user/template');// 列表清空重新请求
            this.getDetail()// 重新请求详情
        },



        // 返回
        goBack (step) {
            const value = Math.abs(parseInt(step)) || 0;
            if (window.history.length <= value + 1) {
                // 返回列表页
                this.$router.push('/user/template')
                // sessionStorage.removeItem('/user/template/detail');
            } else {
                this.$router.go(-value);
                // sessionStorage.removeItem('/user/template/detail');
            }
        },

        // 去下载小样
        gotoMockup () {
            const query = this.$route.query || {}

            sessionStorage.setItem('/user/template/detail', JSON.stringify({ tid: this.tid, detail: this.detail }))
            this.$router.push({ path: '/user/template/mockup', query: query });
        },
    },
    created () {
        // 缓存
        if (process.client) {
            const query = this.$route.query || {}
            const tid = parseInt(query.tid) || '';
            this.tid = tid;
            this.getDetail().then(() => this.inited = true);
        }
    },
};
</script>
<style lang="scss" scoped>
.template-layout {
    position: relative;
    display: flex;
    flex-direction: column;

    &>h2 {
        display: flex;
        align-items: center;
        font-size: 36px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 40px;

        i {
            margin: 0 8px;
            font-size: 16px;
            color: #555;
            font-weight: normal;
        }

        a {
            cursor: default;
            color: #555;

            &:hover {
                color: #000;
            }
        }

        a:first-child {
            cursor: pointer;
        }

        a:last-child {
            color: #000;
        }
    }

    &>h3 {
        font-size: 18px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 20px;
        margin-top: 40px;
        margin-bottom: 18px;
    }

    .user-fixed-head-title {
        display: flex;
        align-items: center;

        button {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 8px;
            font-weight: normal;
            pointer-events: all;
            border-radius: 4px;

            &:hover {
                background-color: #f3f3f3;
                color: #000;
            }

            i {
                font-size: 12px;
            }
        }
    }

    &>.loading {
        position: fixed;
        left: 228px;
        top: 0;
        bottom: 0;
        right: 0;
    }

    &>.initing {
        flex: 1;
        width: 100%;
    }
}

// .detail-title {
//     display: flex;
//     width: 100%;
//     line-height: 40px;
//     font-size: 14px;
//     color: #555555;
//     border-bottom: 1px solid #ebebeb;
//     box-sizing: border-box;
//     border-radius: 8px 8px 0 0;
//     z-index: 9991;
//     height: 40px;

//     .detail-title-fixed {
//         width: 100%;
//         max-width: 880px;
//         margin: 0 auto;
//     }

//     .sticky {
//         width: 100%;

//         &::v-deep .sticky-fixed {
//             background-color: #fff;
//             border-bottom: 1px solid #ebebeb;
//         }
//     }

//     span {
//         margin-left: 28px;
//         position: relative;
//         cursor: pointer;

//         &:hover {
//             color: #ea4c89;
//         }
//         &::before {
//             content: '';
//             position: absolute;
//             width: 6px;
//             height: 6px;
//             border-top: 2px solid #555;
//             border-right: 2px solid #555;
//             top: 50%;
//             left: -20px;
//             transform: translateY(-50%) rotate(45deg);
//         }

//         &:first-child {
//             margin-left: 0;
//             &::before {
//                 display: none;
//             }
//         }

//         &:last-child {
//             color: #000;
//             cursor: default;
//             &:hover {
//                 color: #000;
//             }
//         }
//     }
// }

.detail-row {
    display: flex;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e6e6e6;
    padding: 40px;
}

.detail-mockup {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 52%;

    &>.template-preview {
        border-radius: 4px;

        &::v-deep .process-icon {
            .process-tip {
                width: 24px;
                height: 24px;
                margin-right: 8px;
            }
        }
    }

    &>ul {
        flex: 1;
        display: flex;
        justify-content: center;
        padding: 4px;

        li {
            width: 60px;
            height: 60px;
            margin: 12px;
            box-sizing: border-box;
            border-radius: 4px;
            border: 2px solid #e6e6e6;
            cursor: pointer;

            &:hover {
                border-color: #f6b2cd;
            }

            &.active {
                border-color: #f6b2cd;
            }

            img {
                width: 100%;
                height: 100%;
                border-radius: 4px;
            }
        }
    }
}

.detail-info {
    flex: 1;
    margin-left: 34px;

    &>.input-inline {
        justify-content: flex-start;
        font-size: 24px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 24px;
        height: 24px;
        padding: 6px 0;
        border: none;
        border-bottom: 1px solid transparent;
        max-width: 432px;
        overflow: hidden;
        border-radius: 0;

        &::v-deep {
            .input-inline-textarea {
                overflow: hidden;

                span,
                textarea {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: block;
                }
            }

            .input-inline-icon {
                height: 24px;
                width: 24px;
                position: relative;
                top: -1px;

                svg {
                    width: 20px;
                    height: 20px;
                }
            }

            &.focus {
                border-bottom-color: #c6c6c6;
            }
        }
    }

    .detail-info-name {
        margin-top: 28px;
        padding-top: 26px;
        position: relative;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #000000;
        line-height: 18px;

        &::before {
            content: 'Product name';
            position: absolute;
            left: 0;
            top: 0;
            font-size: 14px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #000000;
            line-height: 14px;
        }

        a {
            color: inherit;
            text-decoration: underline;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #087196;
            line-height: 18px;

            &:hover {
                color: #287e9c;
                text-decoration: none;
            }
        }
    }

    .detail-info-colors {
        margin: 28px 0 0;
        padding-top: 18px;
        position: relative;

        &::before {
            content: 'Colors';
            position: absolute;
            left: 0px;
            top: 0;
            font-size: 14px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #000000;
            line-height: 14px;
        }

        ul {
            display: flex;
            flex-wrap: wrap;
            position: relative;
            margin: 0 -4px;
            top: 4px;
        }

        li {
            margin: 4px;
            width: 24px;
            height: 24px;
            border-radius: 2px;
            position: relative;
            cursor: pointer;

            &::before {
                content: '';
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
                border: 1px solid rgba(0, 0, 0, 0.2);
                border-radius: 2px;
            }

            div {
                width: 100%;
                height: 100%;
            }

            svg {
                position: absolute;
                width: 24px;
                height: 24px;
                left: 0;
                top: 0%;
                fill: #fff;
                opacity: 0;
                -webkit-filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.7));
                filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.7));
            }

            &.active svg {
                opacity: 1;
            }
        }
    }

    .detail-info-sizes {
        position: relative;
        margin: 28px 0 0;
        padding-top: 26px;
        position: relative;
        display: flex;

        &::before {
            content: 'Size & cost';
            position: absolute;
            left: 0px;
            top: 0;
            font-size: 14px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #000000;
            line-height: 14px;
        }

        table {
            width: 100%;
            border-collapse: collapse;

            th {
                font-size: 12px;
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                color: #000000;
            }

            td {
                font-size: 12px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                color: #000000;
            }

            th,
            td {
                border: 1px solid #e6e6e6;
                text-align: center;
                height: 40px;

                padding: 0 5px;

                &:first-child {
                    background: #f6f6f6;
                    min-width: 40px;
                    max-width: 70px;
                    text-decoration: none !important;

                    .level-discount {
                        white-space: normal;
                        line-height: 14px;
                    }
                }
            }

            tbody tr:first-child {
                td {
                    text-decoration: line-through;
                }
            }

            .level-discount {
                display: inline-block;
                white-space: nowrap;
                line-height: 20px;
                font-size: 12px;
                font-family: Roboto-Regular, Roboto;
                flex: 1;

                &::v-deep span {
                    vertical-align: middle;
                }
            }
        }

        &[level='1'] tbody {
            tr:first-child {
                display: none;
            }

            tr:last-child {
                td:first-child {
                    &::before {
                        content: 'Cost';
                    }

                    .level-discount {
                        display: none;
                    }
                }

                // display: none;
            }
        }
    }

    .detail-info-print {
        margin: 28px 0 0;
        padding-top: 24px;
        position: relative;
        display: flex;
        flex-wrap: wrap;

        &::before {
            content: 'Designs';
            position: absolute;
            left: 0px;
            top: 0;
            font-size: 14px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #000000;
            line-height: 14px;
        }

        .surface-preview {
            white-space: nowrap;
            margin: 0 -2px;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #555555;
            text-decoration: underline;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
            position: relative;
            top: 2px;

            &::v-deep .popper {
                margin: 2px;

                cite {
                    max-width: 676px;
                }

                button {
                    display: inline-block;
                    vertical-align: top;
                    line-height: 16px;
                    text-decoration: none;
                    padding: 4px;
                    background: rgba(0, 0, 0, 0.04);
                    border-radius: 6px;
                }
            }
        }
    }

    .detail-info-branding {
        margin: 28px -4px 0;
        padding-top: 26px;
        position: relative;
        display: flex;
        flex-wrap: wrap;

        &::before {
            content: 'Branding';
            position: absolute;
            left: 4px;
            top: 0;
            font-size: 14px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #000000;
            line-height: 14px;
        }

        &::v-deep .brand-preview {
            padding: 0;
            background: transparent;
            width: 100%;
            height: auto;
            justify-content: flex-start;
            flex-flow: wrap;
            li {
                color: #000;

                .popper-name {
                    &:hover {
                        background-color: rgba(0, 0, 0, 0.07);
                    }
                }

                &:first-child {
                    padding-left: 0;
                    margin-right: 8px;
                }

                &:last-child {
                    padding-right: 0;
                    margin-left: 0;
                }
            }
        }

        // &.pre .brand-preview {
        //     flex-direction: column;
        //     align-items: flex-start;
        //     height: auto;
        //     overflow: hidden;
        //     &::v-deep li {
        //         overflow: hidden;
        //         display: flex;

        //         .popper {
        //             flex: 1;
        //             overflow: hidden;
        //             max-width: calc(20vw - 20px);
        //         }

        //         &:last-child {
        //             margin-left: 0;
        //             margin-top: 4px;
        //             .popper-name strong {
        //                 max-width: initial;
        //             }
        //         }
        //     }
        // }
    }

    .detail-info-async {
        position: relative;
        margin: 28px 0 0;
        position: relative;
        padding-top: 28px;

        &::before {
            content: 'Synced stores';
            position: absolute;
            left: 0;
            top: 0;
            font-size: 14px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #000000;
            line-height: 14px;
        }

        &>p {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #f6f6f6;
            border-radius: 2px;
            height: 72px;

            svg {
                width: 18px;
                height: 18px;
                fill: #565656;
                background: #dcdcdc;
                padding: 7px;
                border-radius: 32px;
            }

            span {
                margin-left: 6px;
                font-size: 14px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                color: #555555;
                line-height: 32px;
            }
        }

        .detail-info-async-list {
            display: flex;
            flex-wrap: wrap;
            background: #f8f8f8;
            border-radius: 6px;
            padding: 11px;

            .store-icon-select {
                display: flex;
                margin: 5px;
            }
        }
    }

    .detail-info-action {
        display: flex;
        margin: 20px -4px 0;

        button {
            font-size: 14px;
            height: 32px;
            white-space: nowrap;
        }

        .mockups-download {
            margin: 0 4px;
        }

        &>button {
            margin: 0 4px;

            &:nth-child(1) {
                flex: 108;
            }

            &:nth-child(2) {
                flex: 108;
            }

            &:nth-child(3) {
                flex: 156;
            }
        }

        &>.popper::v-deep {
            margin: 0 4px;

            .popper-name {
                &>button {
                    padding: 0;
                    width: 32px;

                    i {
                        font-size: 24px;
                    }
                }
            }

            .popper-content {
                background: #ffffff;
                box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.12);
                border-radius: 8px;
                border: 1px solid #ebebeb;
            }

            .arrow {
                display: none;
            }
        }

        //     {
        //     margin: 0 4px;
        // }

        .table-more {
            display: flex;
            flex-direction: column;
            padding: 12px;

            button {
                border: none;
                background: none;
                margin: 0;
                width: 168px;
                height: 34px;
                box-sizing: border-box;
                padding: 0 8px;
                font-size: 14px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                color: #555555;
                justify-content: flex-start;

                &:hover {
                    background: #f6f6f6;
                    color: #000;
                }
            }
        }
    }
}

.dialog-warp {
    width: 320px;
    box-sizing: border-box;
    padding: 20px 20px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;

    p {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 30px 0;
        text-align: center;

        i {
            width: 72px;
            height: 72px;
            background: #fff4f3;
            border-radius: 72px;
            line-height: 72px;
            font-size: 34px;
            text-align: center;
            color: #f44336;
        }

        strong {
            margin-top: 18px;
            font-size: 16px;

            color: #000000;
            line-height: 18px;
        }

        span {
            margin-top: 12px;
            font-size: 12px;

            color: #999;
            line-height: 18px;
        }

        input {
            margin-top: 8px;
            width: 400px;
            height: 32px;
            box-sizing: border-box;
            padding: 7px 8px;
            line-height: 18px;
            font-size: 14px;
            font-weight: 400;
            border: 1px solid #d9d9d9;
            border-radius: 5px;
        }
    }

    button {
        width: 100%;
        margin-top: 18px;
        height: 40px;
        min-height: 40px;
    }
}

.dialog-remove {
    height: 372px;

    p {
        margin: 17px 0;
    }
}

.dialog-forbid {
    height: 372px;
    box-sizing: border-box;

    p {
        i {
            background: none;
            font-size: 60px;
            color: #ddd;
        }

        strong {
            text-align: center;
            line-height: 24px;
        }
    }
}
</style>
